<template>
	<view>
		<view class="container_2">
			<view :class="scrollTop > 85 && noteln > 7 ? 'header_2_fixed' : 'header_2'">
				<navigator url="../city/index?id=2" hover-class="none">
					<view class="city_2">
						<text class="fa fa-map-marker fa-lg"></text>
						{{ city }}
					</view>
				</navigator>
				<view class="search_2" @tap="toSelectNote">
					<icon style="margin-top: 0;" type="search" size="14" />
					<view>请搜索相关简历</view>
				</view>
			</view>

			<view :class="(scrollTop > 85 && noteln > 7) || scrollTop == 146 ? 'selectcars_fixed' : 'selectcars'">
				<view class="itemselectcars" @tap="toSelectArea" data-id="1">
					{{ areatitle ? areatitle : '区域' }}
					<image src="/static/imgs/icon/down.png"></image>
				</view>

				<view class="itemselectcars" style="width: 30%" @tap="toSelectCate">
					{{ catetitle ? catetitle : '行业' }}
					<image src="/static/imgs/icon/down.png"></image>
				</view>

				<view class="itemselectcars" style="width: 30%" @tap="toSelectEdu">
					{{ edutitle ? edutitle : '学历' }}
					<image src="/static/imgs/icon/down.png"></image>
				</view>

				<view class="itemselectcars" style="width: 15%" @tap="toSelectNote">
					筛选
					<image src="/static/imgs/icon/select2.png" style="width: 35rpx; height: 35rpx"></image>
				</view>

				<view class="select_cars" v-if="!isArea">
					<view class="select_cars_list" @tap="SelectAreaItem" data-title="全部" data-id="0">
						<text>全部</text>

						<image v-if="areaid == 0" src="/static/imgs/icon/dui.png"></image>
					</view>

					<view class="select_cars_list" @tap="SelectAreaItem" :data-title="item.name" :data-id="item.id"
						v-for="(item, index) in arealist" :key="index">
						<text>{{ item.name }}</text>

						<image v-if="areaid == item.id" src="/static/imgs/icon/dui.png"></image>
					</view>
				</view>
			</view>

			<view class="small_overlay" v-if="!isArea"></view>

			<view class="select_price" v-if="!isEdu">
				<view class="item" style="width: 180rpx" @tap="SelectEduItem" data-title="不限" data-id="不限">不限</view>
				<view class="item" @tap="SelectEduItem" data-title="初中" data-id="初中">初中</view>
				<view class="item" @tap="SelectEduItem" data-title="高中" data-id="高中">高中</view>
				<view class="item" @tap="SelectEduItem" data-title="中技" data-id="中技">中技</view>
				<view class="item" @tap="SelectEduItem" data-title="中专" data-id="中专">中专</view>
				<view class="item" @tap="SelectEduItem" data-title="大专" data-id="大专">大专</view>
				<view class="item" @tap="SelectEduItem" data-title="本科" data-id="本科">本科</view>
				<view class="item" @tap="SelectEduItem" data-title="硕士" data-id="硕士">硕士</view>
				<view class="item" @tap="SelectEduItem" data-title="博士" data-id="博士">博士</view>
				<view class="item" @tap="SelectEduItem" data-title="博后" data-id="博后">博后</view>
			</view>

			<view class="small_overlay" v-if="!isEdu"></view>

			<view class="select_price" v-if="!isCate">
				<view class="item" style="width: 180rpx" @tap="SelectCateItem" data-title="不限" data-id="0">不限</view>

				<view class="item" @tap="SelectCateItem" :data-title="item.name" :data-id="item.id"
					v-for="(item, index) in jobcatelist" :key="index">{{ item.name }}</view>
			</view>

			<view class="small_overlay" v-if="!isCate"></view>

			<!-- 列表 -->
			<view class="news">
				<view class="newslist" v-for="(item, index) in notelist" :key="index">
					<view class="title" @tap="toWorkerDetail" :data-id="item.id">
						<view class="detail">
							<view class="info">
								<view>年龄：{{ item.age }}</view>
								<view>{{ item.gender == 1 ? '男' : '女' }} / {{ item.educationa }} /
									{{ item.express }} / {{ item.province }} {{ item.city }} {{ item.area }}</view>
								<view class="mar-top10">毕业院校： {{ item.alma_mater }}</view>
								<view class="mar-top10">专业：{{ item.major }}</view>
								<view class="mar-top10">毕业时间：{{ item.graduation_time }}</view>
								<view class="mar-top10" v-if="item.certificate">证书名称：{{ item.certificate }}</view>
								<view v-if="item.job_intention" class="jobmoney mar-top10">
									意向职位:
									<text>{{ item.job_intention }}</text>
								</view>
							</view>

							<view class="pic">
								<image :src="item.avatarUrl"></image>
								<view class="mar-top10">{{ item.realname }}</view>

								<!-- <text class="time">{{ item.birthday_time }}</text> -->

								<image :src="'../../imgs/icon/' + (item.gender == 1 ? 'man' : 'sex') + '.png'"
									class="footimg" style="width: 30rpx; height: 30rpx"></image>

								<text class="mar-top10">{{ item.birthday_time }}</text>
								<image :src="'/static/imgs/icon/' + (item.gender === 1 ? 'man' : 'sex') + '.png'"
									class="mar mar-top10" style="width: 30rpx; height: 30rpx"></image>

							</view>
						</view>
					</view>
				</view>


			</view>
		</view>

		<!-- 加载更多 -->
		<view class="loadmore">
			<text>{{ loadMore }}</text>
		</view>

		<!-- <view class="u-tap-btn">
            <button class="u-go-home2" open-type="contact">
                <view class="iconfont fa fa-comments-o"></view>
            </button>
        </view> -->
	</view>
</template>

<script>
	import {
		Note
	} from './note-model.js';
	var note = new Note(); //实例化 首页 对象
	export default {
		data() {
			return {
				city: uni.getStorageSync('companyinfo').city,
				isCars: true,

				// 选择车源开关
				isSort: true,

				// 选择排序开关
				isArea: true,

				isCate: true,
				isEdu: true,

				// 选择价格开关
				isType: true,

				isSelect: true,
				loadMore: '',
				list: [],
				house_list: [],
				housetypelist: [],
				houseareaid: 0,
				housepriceid: 0,
				housetype: 0,
				letway: 0,
				page: 1,
				title: '',
				noteln: 0,
				cateid: 0,
				eduid: '',
				areaid: 0,
				scrollTop: '',
				housewaylist: '',
				typeid: '',
				carid: '',
				priceid: '',
				selectid: '',
				areatitle: '',
				catetitle: '',
				edutitle: '',
				notelist: '',
				arealist: '',
				jobcatelist: '',
				isPrice: false,
				companyid: 0,

				intro: {
					tel: ''
				}
			};
		},
		onPageScroll: function(t) {
			console.log(t.scrollTop); //会随着用户下滑页面值变大
			var that = this;
			if (t.scrollTop <= 145) {
				that.isArea = true;
				that.isEdu = true;
				that.isCate = true;
				that.setData({
					isArea: that.isArea,
					isEdu: that.isEdu,
					isCate: that.isCate
				});
			}
			that.setData({
				scrollTop: t.scrollTop
			});
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onShow: function(options) {
			this.onShowClone3389(options);
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */

		onPullDownRefresh: function() {
			uni.showNavigationBarLoading();
			this.onShowClone3389({});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom(params) {
			var that = this;
			this.page = this.page + 1;
			that.initpage();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			var that = this;
			return {
				title: '招人才',
				path: '/pages/findworker/index'
			};
		},
		methods: {
			/**
			 * 生命周期函数--监听页面加载
			 */
			onShowClone3389: function(options) {
				var that = this;
				uni.setNavigationBarTitle({
					title: '招人才'
				});
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
				var housetypelist = [{
						name: '初中',
						id: 1
					},
					{
						name: '高中',
						id: 2
					},
					{
						name: '中技',
						id: 3
					},
					{
						name: '中专',
						id: 4
					},
					{
						name: '大专',
						id: 5
					},
					{
						name: '本科',
						id: 6
					},
					{
						name: '硕士',
						id: 7
					},
					{
						name: '博士',
						id: 8
					},
					{
						name: '博后',
						id: 9
					}
				];
				var housewaylist = [{
						name: '全职',
						id: 1
					},
					{
						name: '兼职',
						id: 2
					}
				];
				var typeid = 0;
				var carid = 0;
				var priceid = 0;
				var selectid = 0;
				this.setData({
					housetypelist: housetypelist,
					housewaylist: housewaylist,
					typeid: typeid,
					carid: carid,
					priceid: priceid,
					selectid: selectid
				});
				var cityinfo = uni.getStorageSync('cityinfo');
				console.log(cityinfo);
				if (cityinfo) {
					uni.setStorageSync('city', cityinfo.name);
					that.setData({
						city: uni.getStorageSync('cityinfo').name
					});
				} else {}
				that.initpage();
			},

			toSelectArea: function() {
				var that = this;
				// that.data.scrollTop = 146;
				that.isArea = !that.isArea;
				that.isCate = true;
				that.isEdu = true;
				that.setData({
					isEdu: that.isEdu,
					isArea: that.isArea,
					isCate: that.isCate
					// scrollTop: that.data.scrollTop,
					//  noteln:11
				});
			},

			SelectAreaItem: function(e) {
				var that = this;
				var areaid = e.currentTarget.dataset.id;
				that.areatitle = e.currentTarget.dataset.title;
				that.areaid = areaid;
				that.isArea = true;
				that.scrollTop = 85;
				that.setData({
					areaid: that.areaid,
					isArea: that.isArea,
					areatitle: that.areatitle,
					scrollTop: that.scrollTop
				});
				that.initpage();
			},

			toSelectCate: function() {
				var that = this;
				//  that.data.scrollTop = 146;
				that.isCate = !that.isCate;
				that.isEdu = true;
				that.isArea = true;
				that.setData({
					isEdu: that.isEdu,
					isArea: that.isArea,
					isCate: that.isCate
					// scrollTop: that.data.scrollTop,
					//  noteln:11
				});
			},

			SelectCateItem: function(e) {
				var that = this;
				var cateid = e.currentTarget.dataset.id;
				that.catetitle = e.currentTarget.dataset.title;
				that.cateid = cateid;
				that.isCate = true;
				that.scrollTop = 85;
				that.setData({
					cateid: that.cateid,
					isCate: that.isCate,
					catetitle: that.catetitle,
					scrollTop: that.scrollTop
				});
				that.initpage();
			},

			toSelectEdu: function() {
				var that = this;
				// that.data.scrollTop = 146;
				that.isEdu = !that.isEdu;
				that.isArea = true;
				that.isCate = true;
				that.setData({
					isEdu: that.isEdu,
					isArea: that.isArea,
					isCate: that.isCate
					// scrollTop: that.data.scrollTop,
					// noteln:11
				});
			},

			SelectEduItem: function(e) {
				var that = this;
				var eduid = e.currentTarget.dataset.id;
				that.edutitle = e.currentTarget.dataset.title;
				that.eduid = eduid;
				that.isEdu = true;
				that.scrollTop = 85;
				that.setData({
					eduid: that.eduid,
					isEdu: that.isEdu,
					edutitle: that.edutitle,
					scrollTop: that.scrollTop
				});
				that.initpage();
			},

			toSelectNote: function() {
				var that = this;
				uni.navigateTo({
					url: '/pages/selectnote/index'
				});
			},

			initpage: function() {
				var that = this;
				var cityid = uni.getStorageSync('cityinfo').id;
				var params = {
					cityid: cityid,
					page: that.page,
					areaid: that.areaid,
					cateid: that.cateid,
					eduid: that.eduid
				};
				console.log(params);
				note.getNoteListData((data) => {
					that.setData({
						noteln: data.notelist.length,
						arealist: data.arealist,
						jobcatelist: data.jobcatelist
					});
					that.getlist()
				}, params);
			},
			getlist() {
				var that = this;
				var cityid = uni.getStorageSync('cityinfo').id;
				var params = {
					cityid: cityid,
					page: that.page,
					areaid: that.areaid,
					cateid: that.cateid,
					eduid: that.eduid
				};
				console.log(params);
				note.getNoteListList((data) => {
					that.notelist = that.page === 1 ? data.data.data : that.notelist.concat(data.data.data)
					uni.hideNavigationBarLoading(); //完成停止加载
					uni.stopPullDownRefresh();
				}, params);
			},
			toWorkerDetail: function(e) {
				var id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '/pages/workerdetail/index?id=' + id
				});
			},

			selectCars: function(e) {
				var that = this;
				that.setData({
					isSort: true,
					isPrice: true,
					isType: true,
					isSelect: true,
					isCars: !that.isCars
				});
			},

			selectPrice: function() {
				var that = this;
				that.setData({
					isSort: true,
					isCars: true,
					isType: true,
					isPrice: !that.isPrice
				});
			},

			selectType: function() {
				var that = this;
				that.setData({
					isSort: true,
					isCars: true,
					isPrice: true,
					isType: !that.isType
				});
			},

			selectSort: function() {
				var that = this;
				that.setData({
					isCars: true,
					isPrice: true,
					isType: true,
					isSort: !that.isSort
				});
			},

			selectWay: function() {
				var that = this;
				that.setData({
					isSort: true,
					isCars: true,
					isPrice: true,
					isType: true,
					isSelect: !that.isSelect
				});
			},

			toLogin() {
				console.log('占位：函数 toLogin 未声明');
			},

			doCall() {
				console.log('占位：函数 doCall 未声明');
			}
		}
	};
</script>
<style>
	/* search */
	/**app.wxss**/
	page {
		background-size: 100% 100%;
		height: 100%;
		font-size: 32rpx;
		font-family: '微软雅黑', '方正黑体';
		color: #333;
		background: #f5f5f5;
	}

	.container_2 {
		background-color: #f0f1f5;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header_2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background: #fff;
	}

	.header_2_fixed {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background: #fff;
		position: fixed;
		z-index: 100;
		top: 0px;
	}

	.city_2 {
		height: 80rpx;
		line-height: 80rpx;
		color: #000000;
		font-size: 0.9rem;
		font-weight: 600;
	}

	.search_2 {
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f0f1f5;
		display: flex;
		flex-direction: row;
		justify-content: center;
		border-radius: 30rpx 30rpx 30rpx 0rpx;
	}

	.search_2 view {
		color: #a6a6a6;
		font-size: 0.7rem;
		align-self: center;
	}

	.search_2 icon {
		margin-right: 20rpx;
		margin-top: 18rpx;
	}

	.selectcars {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx;
		font-size: 0.8rem;
		background: #ffffff;
	}

	.selectcars_fixed {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx;
		font-size: 0.8rem;

		z-index: 1112;
		position: fixed;
		top: 120rpx;
		background: #fff;
	}

	.itemselectcars {
		display: flex;
		flex-direction: row;
		height: 60rpx;
		justify-content: center;
		align-items: center;
		width: 24%;
	}

	.itemselectcars image {
		width: 15rpx;
		height: 15rpx;
		align-self: center;
		margin-left: 5rpx;
	}

	.red {
		color: #fd6a36;
	}

	.select_cars,
	.select_sort,
	.select_price {
		position: fixed;
		top: 107px;
		left: 0px;
		z-index: 888;
		width: 100%;
		padding-left: 30rpx;

		background-color: #fff;
	}

	.select_cars text,
	.select_sort text {
		display: block;
		flex: 1;
		line-height: 35px;
		font-size: 13px;
	}

	.select_cars text:last-child,
	.select_sort text:last-child {
		border-bottom: 0;
	}

	.select_cars_list {
		display: flex;
		border-bottom: 1px solid #ececec;
	}

	.select_cars_list image {
		width: 12px;
		height: 22px;
		padding-top: 8px;
		margin-right: 30rpx;
	}

	.select {
		border-bottom: 1px solid #e62129;
	}

	.select text {
		color: #e62129;
	}

	.select_price {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		padding: 6px 4%;
		padding-top: 30rpx;
	}

	.select_price .item {
		height: 80rpx;
		background: #f3f3f3;
		padding-left: 15rpx;
		padding-right: 15rpx;
		border-radius: 35rpx;
		margin-right: 22rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
	}

	/* 遮罩层 */
	.small_overlay {
		position: fixed;
		width: 100%;
		height: 80%;
		bottom: 0;
		left: 0;
		z-index: 666;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.loadmore {
		line-height: 35px;
		font-size: 15px;
		text-align: center;
	}

	.makebutton {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: center;
	}

	.makebutton button {
		background: #e62129;
		color: #fff;
		width: 260rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 0.7rem;
		align-self: center;
	}

	.news {
		margin-top: 10rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.news .newstitle {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		font-size: 0.7rem;
		border-bottom: 1rpx solid #efefef;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-content: center;
	}

	.news .newstitle view:nth-child(1) {
		height: 40rpx;
		line-height: 40rpx;
		width: 6rpx;
		background: #3274e5;
		align-self: center;
		margin-left: 10rpx;
	}

	.news .newstitle view:nth-child(2) {
		height: 80rpx;
		line-height: 80rpx;
		width: 150rpx;
		padding-left: 15rpx;
	}

	.news .newslist {
		display: flex;
		flex-direction: row;
		width: 720rpx;
		margin: 0 auto;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background: #fff;
	}

	.news .newslist .title {
		width: 100%;
		flex-direction: column;
		display: flex;
		justify-content: space-between;
	}

	.news .newslist .title .detail {
		padding-left: 2%;
		text-align: left;
		font-size: 0.8rem;
		color: #000;
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.news .newslist .title .detail .pic {
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.news .newslist .title .detail .pic image {
		width: 120rpx;
		height: 120rpx;
		align-self: center;
		border-radius: 60rpx;
	}

	.news .newslist .title .detail .pic text {
		font-size: 10px;
		color: #646464;
	}

	.footimg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 120rpx;
		right: 0;
		top: 80rpx;
	}

	.news .newslist .title .detail .info {
		width: 75%;
	}

	.news .newslist .title .detail .info view:nth-child(1) {
		padding-top: 10rpx;
		color: #000;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 15px;
	}

	.news .newslist .title .detail .info view:nth-child(2) {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: #646464;
		font-size: 12px;
	}

	.news .newslist .title .detail view:nth-child(3) {
		/* padding-top: 10rpx;
		padding-right: 10rpx; */
	}

	.news .newslist .title .price {
		width: 28%;
	}

	.news .newslist .title .price .money {
		color: #d65408;
		font-weight: bold;
		font-size: 0.7rem;
		padding-right: 10rpx;
	}

	.jobname>text {
		color: #b7b7b7;
	}

	.jobmoney {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: #646464;
		font-size: 13px;
	}

	.jobmoney text {
		color: #1296db;
		margin-left: 10rpx;
	}

	.info .time {
		color: #ff4129;
		font-size: 0.7rem;
	}

	/*begin 案例*/
	.case {
		margin-top: 10rpx;
		width: 100%;
		background: #fff;
		display: flex;
		flex-direction: column;
	}

	.case .casetitle {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		font-size: 0.7rem;
		border-bottom: 1rpx solid #efefef;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-content: center;
	}

	.case .casetitle view:nth-child(1) {
		height: 40rpx;
		line-height: 40rpx;
		width: 6rpx;
		background: red;
		align-self: center;
	}

	.case .casetitle view:nth-child(2) {
		height: 80rpx;
		line-height: 80rpx;
		width: 150rpx;
		padding-left: 15rpx;
	}

	.case .caselist {
		display: flex;
		flex-direction: row;
		width: 100%;
		margin: 0 auto;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		flex-wrap: wrap;
	}

	.case .caselist .caseitem {
		width: 50%;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
	}

	.case .caselist .caseitem .pic {
		height: 220rpx;
		line-height: 220rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.case .caselist .caseitem .pic image {
		width: 320rpx;
		height: 220rpx;
	}

	.case .caselist .caseitem .title {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 0.7rem;
		padding-top: 10rpx;
		color: #3e3e3e;
		padding-left: 40rpx;
	}

	.case .content {
		font-size: 0.8rem;
		padding: 20rpx;
		text-indent: 50rpx;
		color: #6a6a6a;
	}

	.logincompany {
		width: 100%;
		background: #fff;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logincompany view:nth-child(1) {
		font-weight: bold;
		font-size: 16px;
		color: #000;
	}

	.logincompany button {
		background: #07b56d;
		font-size: 14px;
		color: #fff;
		width: 250rpx;
		height: 80rpx;
		border-radius: 15rpx;
		margin-top: 30rpx;
	}

	.logincompany view:nth-child(3) {
		color: #a2a2a2;
		font-size: 14px;
		margin-top: 30rpx;
	}

	button::after {
		border: 0;
	}

	/*end 案例*/
</style>